<template>
    <view class="order">
        <!-- <view class="my-segmented-control-box">
            <uni-segmented-control
                :current="current" 
                :values="items" 
                styleType="text" 
                activeColor="#d1df58"
                class="my-segmented-control"
                @clickItem="onClickItem"
            ></uni-segmented-control>
        </view> -->
        <uni-list :border="true">
            <uni-list-item
                v-for="(item, index) in checkList"
                :key="index"
                title=""
                rightText=""
                note=""
                thumb=""
                thumbSize="lg"
            >
                <template v-slot:header>
                </template>
                <template v-slot:body>
                    <view class="slot-box slot-text">
                        <view class="slot-box-row-1">
                            <view class="slot-box-row-1-left">
                                <image
                                    src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/logo.png" 
                                    :draggable="false"
                                    mode="scaleToFill"
                                    class="slot-img-1"
                                ></image>
                                <view class="slot-box-row-1-left-text">{{ item.zo_ex73 == '否' ? '车辆转运' : '航空转运' }}</view>
                            </view>
                            <view class="slot-box-row-1-right">
                                {{ item.status }}
                            </view>
                        </view>
                        <view class="slot-box-row-2 slot-text-color-1">
                            被转运人：{{ item.zo_ex2 }}
                            <template v-if="item.zo_ex73 == '否'">
                                 &nbsp;&nbsp;&nbsp;预估费用：<view style="color: #000; font-weight: bold;"> ￥{{ Number(item.zo_ex23) }}</view>
                            </template>
                        </view>
                        <view class="slot-text-color-1">联系电话：{{ item.zo_ex7 }}</view>
                        <view class="slot-text-color-1">起点：{{ item.zo_ex41 }}</view>
                        <view
                            v-if="item.zo_tjd_n_1 && item.zo_tjd_n_1 != 'null'" 
                            class="slot-text-color-1"
                        >
                            途经点：{{item.zo_tjd_n_1}}
                        </view>
                        <view 
                            v-if="item.zo_tjd_n_2 && item.zo_tjd_n_2 != 'null'" 
                            class="slot-text-color-1"
                        >
                            途经点：{{item.zo_tjd_n_2}}
                        </view>
                        <view 
                            v-if="item.zo_tjd_n_3 && item.zo_tjd_n_3 != 'null'"
                            class="slot-text-color-1"
                        >
                            途经点：{{item.zo_tjd_n_3}}
                        </view>
                        <view class="slot-text-color-1">终点：{{ item.zo_ex42 }}</view>
                        <view class="slot-text-color-1">出发时间：{{ item.zo_dat1 }}</view>
                        <view class="slot-box-row-7 slot-text-color-1">
                            <view
                                class="iconfont icon-shanchu"
                                :class="[(item.status == '已完成' || item.status == '已取消') ? 'slot-icon-2-1' : 'slot-icon-2-2']"
                                @click="deleteOrder(item, index)"
                            ></view>
                            <view style="display: flex; align-items: center;">
                                <!-- <view style="font-size: 24rpx;">
                                    详情
                                </view> -->
                                <button
                                    type="default"
                                    plain
                                    :disabled="item.zo_ex73 == '是'"
                                    class="slot-btn"
                                    @click="formData = item;popup1.open()"
                                >
                                    费用详情
                                </button>
                                <!-- <button
                                    type="primary"
                                    plain
                                    disabled
                                    class="slot-btn"
                                    @click="payOrder(item)"
                                >
                                    支付
                                </button> -->
                                
                            </view>
                        </view>
                    </view>
                </template>
                <!-- <template v-slot:footer>
                    <view class="btn-box">
                        <button
                            type="primary"
                            class="btn"
                            @click="payOrder(item)"
                        >
                            支付
                        </button>
                    </view>
                </template> -->
            </uni-list-item>
        </uni-list>
        <uni-load-more :status="status"></uni-load-more>
        <uni-popup
            ref="popup1" 
            type="center"
            :is-mask-click="true"
        >
                <view class="my-popup-box">
                    <view class="my-popup-box-img">
                        <view class="my-popup-box-img-text">预估费用明细</view>
                    </view>
                    <view class="my-popup-box-content">
                        <view class="my-popup-box-content-text-1">起点：{{formData.zo_ex41}}</view>
                        <view 
                            v-if="formData.zo_tjd_n_1 && formData.zo_tjd_n_1 != 'null'"
                            class="my-popup-box-content-text-1"
                        >
                            途经点：{{formData.zo_tjd_n_1}}
                        </view>
                        <view 
                            v-if="formData.zo_tjd_n_2 && formData.zo_tjd_n_2 != 'null'"
                            class="my-popup-box-content-text-1"
                        >
                            途经点：{{formData.zo_tjd_n_2}}
                        </view>
                        <view 
                            v-if="formData.zo_tjd_n_3 && formData.zo_tjd_n_3 != 'null'"
                            class="my-popup-box-content-text-1"
                        >
                            途经点：{{formData.zo_tjd_n_3}}
                        </view>
                        <view class="my-popup-box-content-text-1">终点：{{formData.zo_ex42}}</view>
                        <view class="my-popup-box-content-text-1">里程数：{{ Number(formData.zo_ex20).toFixed(2) }}km</view>
                        <view  style="border-bottom: 1rpx solid #d8c7c7; margin-bottom: 10rpx"></view>
                      
                        <view 
                            v-if="formData.zo_ex79 != 'null'" 
                            class="my-popup-box-content-text-1"
                        >
                            起步价：<text>￥{{ Number(formData.zo_ex79).toFixed(2) }}元</text>
                        </view>
                        <view 
                            v-if="formData.zo_ex80 != 'null'" 
                            class="my-popup-box-content-text-1"
                        >
                            里程费：<text>￥{{ Number(formData.zo_ex80).toFixed(2) }}元</text>
                        </view>
                        <view class="my-popup-box-content-text-1">过路费：<text>￥{{ Number(formData.zo_ex46).toFixed(2) }}元</text></view>
                        <view class="my-popup-box-content-text-1">吸氧费用：<text>￥{{ Number(formData.zo_ex55).toFixed(2) }}元</text></view>
                        <view
                            v-if="formData.zo_ex81 != 'null'"
                            class="my-popup-box-content-text-1"
                        >
                            其他费用：<text>￥{{ Number(formData.zo_ex81).toFixed(2) }}元</text>
                        </view>
                        <view  style="border-bottom: 1rpx solid #d8c7c7; margin-bottom: 10rpx"></view>
                        <view 
                            v-if="formData.zo_ex77 != 'null'" 
                            class="my-popup-box-content-text-1"
                        >
                            费用合计：<text>￥{{ (Number(formData.zo_ex23) + Number(formData.zo_ex77)).toFixed(2) }}元</text>
                        </view>
                        
                        <template v-if="formData.zo_ex21 || (formData.zo_ex82 && formData.zo_ex82!='null')">
                            <view 
                                v-if="formData.zo_ex21" 
                                class="my-popup-box-content-text-1"
                            >
                                惠民权益：{{ formData.zo_ex21 }}
                            </view>
                            <view 
                                v-else-if="formData.zo_ex82" 
                                class="my-popup-box-content-text-1"
                            >
                                优惠券：{{ formData.zo_ex82 }}
                            </view>
                            <view 
                                v-if="formData.zo_ex77 != 'null'"
                                class="my-popup-box-content-text-1" 
                                style="color: #ce8e1a"
                            >
                                优惠金额：<text>￥-{{ Number(formData.zo_ex77).toFixed(2) }}元</text>
                            </view>
                        </template>
                        <view
                            class="my-popup-box-content-text-1" 
                            style="font-size: 30rpx"
                        >
                            预估支付：<text style="color: red; font-weight: bold;">￥{{ Number(formData.zo_ex23).toFixed(2) }}元</text>
                        </view>
                        <template v-if="formData.zo_ex76 == '是'">
                            <view style="border-bottom: 1rpx solid #d8c7c7; margin-bottom: 10rpx"></view>
                            <view class="my-popup-box-content-text-1" style="color: red">温馨提示：医护人员的陪同费用另外收取</view>
                        </template>
                    </view>
                    <!-- <view style="display: flex; padding-top: 20rpx; box-sizing: border-box;">
                        <button
                            size="mini"
                            type="warn"
                            style=""
                            @click="popup1.close()"
                        >
                            取消
                        </button>
                        <button
                            size="mini"
                            style="background: #2979ff; color: #fff; "
                            @click="popup1.close();"
                        >
                            确认
                        </button>
                    </view> -->
                </view>
         </uni-popup>
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
    import { markRaw, reactive, ref } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { getAppOrderListApi, hideOrderApi } from '@/apis'
    const popup1: Ref<any> = ref(null)
    const formData:Ref<any> = ref({})
    const checkList:Ref<any> = ref([
        // content: [
        //     {
        //         staffName: '服务通知',
        //         studyTime: '暂无消息',
        //         badgeText: 1,
        //         id: 1
        //     }
        // ]
    ])
    const status: Ref<string> = ref('loading') //more: 加载前 loading: 加载中 no-more: 没有更多数据
    const pageNo: Ref<number> = ref(1)
    const pageSize: Ref<number> = ref(20)
    
    const items: Ref<string[]> = ref(['全部', '待处理', '已确认', '任务中', '已完成', '已取消'])
    const current: Ref<number> = ref(0)
    
    const onClickItem = (e) => {
        if (current.value != e.currentIndex) {
            current.value = e.currentIndex;
            checkList.value = []
            status.value = 'loading'
            getAppOrderListApi({
                status: current.value == 0 ? '' : items.value[current.value], //待处理，已确认，任务中，已完成，已取消
               // notNeedPage: false, //是否不需要分页
               // pageNo: pageNo.value, //第几页,默认从1开始
               // pageSize: pageSize.value, //每页几条
               // sortField: '' //排序字段
            }).then((res: any) => {
               console.log(res.data)
               checkList.value = res.data
               
               // status.value = 'no-more'
               // if (checkList.value.totalPages > pageNo.value) {
               //     status.value = 'more'
               // } else {
               //     status.value = 'no-more'
               // }
            }).finally(() => {
                status.value = 'no-more'
            })
        }
    }
    onShow(() => {
        status.value = 'loading'
        getAppOrderListApi({
            status: current.value == 0 ? '' : items.value[current.value], //待处理，已确认，任务中，已完成，已取消
           // notNeedPage: false, //是否不需要分页
           // pageNo: pageNo.value, //第几页,默认从1开始
           // pageSize: pageSize.value, //每页几条
           // sortField: '' //排序字段
        }).then((res: any) => {
           console.log(res.data)
           checkList.value = res.data
           
           // status.value = 'no-more'
           // if (checkList.value.totalPages > pageNo.value) {
           //     status.value = 'more'
           // } else {
           //     status.value = 'no-more'
           // }
        }).finally(() => {
            status.value = 'no-more'
        })
    })

    // 下拉刷新重新加载数据
    // onPullDownRefresh(() => {
    //    status.value = 'loading'
    //    pageNo.value = 1
    //    getAppOrderListApi({
    //        status: current.value == 0 ? '' : items.value[current.value], //待处理，已确认，任务中，已完成，已取消
    //        // notNeedPage: false, //是否不需要分页
    //        // pageNo: pageNo.value, //第几页,默认从1开始
    //        // pageSize: pageSize.value, //每页几条
    //        // sortField: '' //排序字段
    //    }).then((res: any) => {
    //        console.log(res.data)
    //        checkList.value = res.data
           
    //        // status.value = 'no-more'
    //        // if (checkList.value.totalPages > pageNo.value) {
    //        //     status.value = 'more'
    //        // } else {
    //        //     status.value = 'no-more'
    //        // }
    //    }).finally(() => {
    //        console.log(123)
    //        status.value = 'no-more'
    //        uni.stopPullDownRefresh();
    //    })
    // })


    // 上拉加载数据
    // onReachBottom(() => {
    //    if (checkList.value.totalPages > pageNo.value) {
    //        status.value = 'loading'
    //        pageNo.value++
    //        getAppOrderListApi({
    //            status: current.value == 0 ? '' : items.value[current.value], //待处理，已确认，任务中，已完成，已取消
    //             notNeedPage: false, //是否不需要分页
    //             pageNo: pageNo.value, //第几页,默认从1开始
    //             pageSize: pageSize.value, //每页几条
    //             sortField: '' //排序字段
    //        }).then((res: any) => {
    //            console.log(res.data)
    //            res.data.unshift(...checkList.value)
    //            checkList.value = res.data
    //            if (checkList.value.totalPages > pageNo.value) {
    //                status.value = 'more'
    //            } else {
    //                status.value = 'no-more'
    //            }
    //        })
    //    }
    // })
    const payOrder = () => {
        // 支付
    }
    const deleteOrder = (val, index) => {
        // 删除
        if (val.status == '已完成' || val.status == '已取消') {
            uni.showModal({
                showCancel: true,
                title: '温馨提示',
                content: '请确认是否删除！', 
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        checkList.value.splice(index, 1)
                        hideOrderApi({
                            zo_id: val.zo_id
                        })
                        // 调删除接口
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        } else {
            uni.showModal({
                showCancel: true,
                title: '温馨提示',
                content: '订单暂未完成！', 
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        // 调删除接口
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        }
        
    }
</script>

<style lang="scss" scoped>
    .order {
        min-height: 100vh;
        background-color: #f2f2f2;
    }
    .my-segmented-control {
        width: 100%;
        position: fixed; 
        top: 0;
        z-index: 100;
        background-color: #f2f2f2;
    }
    .my-segmented-control-box {
        height: 80rpx;
    }
    .btn-box {
        display: flex;
        justify-content: center;
        align-items: center;
        .btn {
            width: 100rpx;
            height: 60rpx;
            display: flex;
            font-size: 30rpx;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    /* list样式修改 */
    .slot-box {
        // margin-top: 10rpx;
        flex: 1;
    	display: flex;
    	flex-direction: column;
        background: rgb(255, 255, 255);
        border-radius: 40rpx;
        box-sizing: border-box;
        padding: 20rpx;
        .slot-box-row-1 {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            border-bottom: 1rpx solid #fff5f5;
            box-sizing: border-box;
            padding: 12rpx 0;
            .slot-box-row-1-left {
                display: flex;
                align-items: center;
                .slot-img-1 {
                    width: 40rpx;
                    height: 40rpx;
                }
                .slot-box-row-1-left-text {
                    // color: #999;
                    box-sizing: border-box;
                    padding-left: 10rpx;
                }
            }
            .slot-box-row-1-right {
                color: #999;
            }
        }
        .slot-box-row-2 {
            display: flex;
        }
    }
    .slot-text {
    	font-size: 30rpx;
        .slot-text-color-1 {
            color: #535353;
            padding: 10rpx 0;
            font-size: 26rpx;
        }
        .slot-text-color-2 {
            color: #999;
        }
    }
    .slot-box-row-7 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .slot-icon-2-1 {
            font-size: 40rpx;
            color: #000;
        }
        .slot-icon-2-2 {
            font-size: 40rpx;
            color: rgb(219, 219, 219);
        }
        .slot-btn {
            margin: 0;
            font-size: 20rpx;
        }
    }
    
    
    :deep(.uni-list) {
        // margin-top: 10rpx;
        background-color: rgba(0, 0, 0, 0) !important;
        .uni-list-item {
            background-color: rgba(0, 0, 0, 0) !important;
        }
    }
    :deep(.uni-list-item__container) {
        padding: 10rpx 10rpx !important;
        padding-left: 10rpx !important;
    }
    // 列表标题title,note
    :deep(.uni-list-item__content-title) {
        font-size: 30rpx;
    }
    :deep(.uni-list-item__content-note) {
        font-size: 30rpx;
    }
    :deep(.uni-list--border:after) {
        background-color: rgba(0,0,0,0) !important;
    }
    .my-popup-box {
        background: #fff; 
        width: 600rpx; 
        box-sizing: border-box; 
        padding: 0 0 30rpx 0; 
        border-radius: 40rpx;
        .my-popup-box-img {
            background: url(https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/transshipmentInformation/popup-bg-2.png); 
            background-size:100% 100%; 
            width:100%; 
            height: 150rpx; 
            border-radius: 50rpx 50rpx 0 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .my-popup-box-img-text {
                font-size: 30rpx;
                letter-spacing: 10rpx;
                font-weight: bold;
            }
        }
        .my-popup-box-content {
            font-size: 26rpx; 
            box-sizing: border-box; 
            padding: 30rpx;
            .my-popup-box-content-text-1 {
                padding-bottom: 20rpx;
            }
        }
    }
</style>
